<template>
  <view>
    <mxp-popup ref="_introPopupRef" :height="`${height}px`" :toolbarOptions="{ showConfirm: false, title: '简介', height: '60px' }">
      <mxp-refresh-scroll-view :height="`${height - 60}px`" :style="{ height: `${height - 60}px`, width: '750rpx' }" :queryData="queryData">
        <view v-if="dramaDetial" style="box-sizing: border-box; width: 750rpx; padding: 15px">
          <view class="header-box">
            <view class="image-box">
              <mxp-image :src="dramaDetial.dramaCover" width="63px" height="112px" borderRadius="4px" background="#f2f2f2"></mxp-image>
            </view>
            <view class="header-left-box">
              <view class="title-box">
                <text class="title">{{ dramaDetial.dramaTitle }}</text>
              </view>
              <view class="tags-box">
                <text class="tags">{{ dramaDetial.dramaYear }}</text>
                <text class="tags">·</text>
                <text v-for="(item, index) in dramaDetial.categoryList" :key="index" class="tags">{{ item.categoryName }}</text>
              </view>
              <view class="tags-box">
                <text class="tags">更新至{{ dramaDetial.episodeNum }}集</text>
                <text class="tags">共{{ dramaDetial.seqNum }}集</text>
              </view>
            </view>
          </view>
          <mxp-tag-title title="选集"></mxp-tag-title>
          <view class="drama-series-list">
            <view
              v-for="(item, index) in dramaDetial.episodeList"
              :key="item.seq!"
              :style="{ borderColor: item.state === 'free' ? '#999999' : '#efa80f' }"
              class="drama-series-item"
              @click="heCutEpisode(index, item.state)"
            >
              <play-animation v-if="index === currEpisodeIndex" :color="item.state === 'free' ? '#999999' : '#efa80f'"></play-animation>
              <text v-else>{{ index + 1 }}</text>
              <template v-if="item.state === 'lock'">
                <text class="vip">vip</text>
                <view class="lock-mark">
                  <image class="lock" src="/static/images/video/ico_lock.svg" mode="scaleToFill"></image>
                </view>
              </template>
            </view>
          </view>
          <mxp-tag-title title="剧情介绍"></mxp-tag-title>
          <view class="intro-box">
            <mxp-fold height="96px" contentLineHeight="24px" buttonPosition="right" :content="dramaDetial.dramaDesp"></mxp-fold>
          </view>
          <mxp-tag-title title="主创团队"></mxp-tag-title>
          <mxp-horizontal-scroll>
            <view class="team-list">
              <view v-for="(item, index) in dramaDetial.performerRoleList" :key="index" class="team">
                <mxp-image
                  :src="item.staffHeadImage || '/static/images/logo1.svg'"
                  width="50px"
                  height="50px"
                  borderRadius="50px"
                  background="#f2f2f2"
                ></mxp-image>
                <text class="name">{{ item.name }}</text>
                <view>
                  <text class="sex">{{ item.staffSex === 1 ? '男' : '女' }}</text>
                </view>
                <view>
                  <text v-if="item.staffType === 1" key="text-1" class="role">导演</text>
                  <text v-else-if="item.staffType === 2" key="text-2" class="role">制片人</text>
                  <text v-else-if="item.staffType === 3" key="text-3" class="role">主演</text>
                  <text v-else-if="item.staffType === 4" key="text-4" class="role">演员</text>
                  <text v-else key="text-5" class="role">未知</text>
                </view>
                <view v-if="item.staffType === 3 || (item.staffType === 4 && item.role)">
                  <text class="role">饰</text>
                  <text class="role" style="margin-left: 2px; color: #111111">{{ item.role }}</text>
                </view>
              </view>
            </view>
          </mxp-horizontal-scroll>
          <view style="height: 30px"></view>
        </view>
      </mxp-refresh-scroll-view>
    </mxp-popup>
  </view>
</template>

<script setup lang="ts">
  import { getCurrentInstance, ref } from 'vue';
  import MxpImage from '@/mxp-ui/mxp-image/mxp-image.vue';
  import MxpPopup from '@/mxp-ui/mxp-popup/mxp-popup.vue';
  import MxpFold from '@/mxp-ui/mxp-fold/mxp-fold.vue';
  import MxpHorizontalScroll from '@/mxp-ui/mxp-horizontal-scroll/mxp-horizontal-scroll.vue';
  import MxpTagTitle from '@/mxp-ui/mxp-tag-title/mxp-tag-title.vue';
  import PlayAnimation from '@/components/page/play-animation/play-animation.vue';
  import { type DramaDetial, getDramaDetialAxios } from '@/api/drama';
  import MxpRefreshScrollView, { type Ins } from '@/mxp-ui/mxp-refresh-scroll-view/mxp-refresh-scroll-view.vue';

  export type ShowEvent = {
    /** 点击切换剧集的回调 */
    cutEpisode?: (index: number) => void;
  };

  defineOptions({
    name: 'intro-popup',
  });

  const props = defineProps({
    /** 高度 */
    height: { type: Number, required: true },
    /** 第三方剧目id */
    thirdDramaId: { type: String, default: undefined },
    /** 剧目id */
    dramaId: { type: Number, default: undefined },
    /** 是否第三方 */
    isThird: { type: Boolean, required: true },
    /** 当前播放剧集的下标 */
    currEpisodeIndex: { type: Number, required: true },
  });

  const dramaDetial = ref<DramaDetial | undefined>(undefined);
  let cutEpisode: ShowEvent['cutEpisode'] | undefined = undefined;
  const _introPopupRef = ref<InstanceType<typeof MxpPopup> | null>(null);
  /** 第一个无权播放的剧集 index */
  const firstIndex = ref(0);
  const instance = getCurrentInstance();
  /** 显示 */
  function show(data: ShowEvent) {
    cutEpisode = data.cutEpisode;
    if (!_introPopupRef.value && instance?.proxy?.$refs?._introPopupRef) {
      _introPopupRef.value = instance?.proxy.$refs._introPopupRef as InstanceType<typeof MxpPopup>;
    }
    _introPopupRef.value?.show();
  }

  /** 隐藏 */
  function hide() {
    _introPopupRef.value?.hide();
  }

  /** 点击切换剧集 */
  function heCutEpisode(index: number, status: 'free' | 'lock' | 'unlock') {
    if (status !== 'lock') {
      typeof cutEpisode === 'function' && cutEpisode(index);
      hide();
    } else if (index <= firstIndex.value) {
      typeof cutEpisode === 'function' && cutEpisode(index);
      hide();
    } else {
      uni.showToast({ title: '暂不支持从中间解锁', icon: 'none', position: 'bottom' });
    }
  }

  /** 加载中 */
  async function queryData(ins?: Ins) {
    try {
      const data = props.isThird ? { thirdDramaId: props.thirdDramaId } : { dramaId: props.dramaId };
      const res = await getDramaDetialAxios(data);
      dramaDetial.value = res.data;
      firstIndex.value = res.data.episodeList.findIndex((item) => item.state === 'lock');
      ins?.setSuccess();
    } catch (error) {
      ins?.setEmpty('fail_load', error.msg || '获取数据失败，BD0001');
    }
  }

  defineExpose({
    /** 显示 */
    show,
    /** 隐藏 */
    hide,
  });
</script>

<style lang="scss" scoped>
  .drama-series-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    grid-gap: 15px;
    align-items: center;
    justify-content: space-between;

    .drama-series-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border: 1px solid #efa80f;
      border-radius: 4px;

      .vip {
        position: absolute;
        top: -10px;
        right: -16px;
        z-index: 2;
        padding: 4px 10px;
        font-size: 12px;
        background: #efa80f;
        border-radius: 20px;
        transform: scale(0.7);
      }

      .lock-mark {
        position: absolute;
        right: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.3);

        .lock {
          width: 18px;
          height: 18px;
        }
      }
    }
  }

  .header-box {
    display: flex;
    flex-direction: row;
    align-items: flex-end;

    .image-box {
      height: 112px;
      padding-right: 15px;
    }

    .header-left-box {
      .title-box {
        margin-bottom: 8px;

        .title {
          font-size: 22px;
          font-weight: bold;
          color: #000000;
        }
      }

      .tags-box {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 4px;

        .tags {
          margin-right: 4px;
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }

  .team-list {
    display: flex;
    flex-flow: row nowrap;

    .team {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      margin-left: 15px;

      &:first-child {
        margin-left: 0;
      }

      .name {
        margin-top: 8px;
        font-size: 14px;
        color: #333333;
      }

      .sex {
        margin-top: 4px;
        font-size: 10px;
        color: #999999;
      }

      .role {
        margin-top: 4px;
        font-size: 12px;
        color: #999999;
      }
    }
  }
</style>
